<template>
  <div>
    <el-tree :props="props" :load="loadNode" lazy show-checkbox node-key='nodeId' :default-expanded-keys="expandKeys"></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      props: {
        label: "name",
        children: "zones",
        isLeaf: "leaf"
      },
      expandKeys: []
    };
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {        
        this.expandKeys = [...this.expandKeys, '10'];
        resolve([{ nodeId: '10', name: "region" }]);
        return;
      }
      // if (node.level > 1) return resolve([]);
      let seed = 20
      setTimeout(() => {
        const data = [
          {
            nodeId: '' + seed++, 
            name: "leaf",
            leaf: true
          },
          {
            nodeId: '' + seed++, 
            name: "zone"
          }
        ];

        resolve(data);
      }, 500);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>